<template>
	<view>
		<view class="upload-imgs-list">
			<view class="upload_camera fx-colum-center" :style="'width: '+width+'rpx;height:'+width+'rpx;'"
				@click="addImg">
				<van-icon name="plus" size="40rpx" color="#8A8F99" />
				<view class="" v-if="showText">{{imgs.length}}/{{maxNum}}添加图片</view>
			</view>
			<view class="upload-imgs" :style="'width: '+width+'rpx;height:'+width+'rpx;'" v-for="(img,index) in imgs"
				:key="index">
				<image :src="img" mode="aspectFill" @click="$api.toPreviewImg(imgs,index)"></image>
				<image src="/static/img_cha.png" mode="widthFix" class="del-icon" @click="delimg(index)"></image>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "c-upload",
		props: {
			// 图片列表
			imgs: {
				typeof: Array,
				default: []
			},
			// 最大支持数量
			maxNum: {
				typeof: Number || String,
				default: 1
			},
			// 显示文字
			showText: {
				typeof: Boolean,
				default: true
			},
			width: {
				typeof: Number || String,
				default: 190
			},
		},
		data() {
			return {

			};
		},
		methods: {
			//删除图片
			delimg(index) {
				this.$emit('delImg', index)
			},
			// 上传图片
			addImg() {
				if (this.imgs.length < this.maxNum) {
					let that = this;
					uni.chooseImage({
						count: 1, // 最多可以选择的图片张数，默认9
						sizeType: ['compressed'], // original 原图，compressed 压缩图，默认二者都有
						sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
						success: function(res) {
							that.$emit('addSuccess', res.tempFilePaths[0])
						}
					});
				}
			},

		}
	}
</script>

<style scoped lang="scss">
	.upload-imgs-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.upload-imgs {
		width: 190rpx;
		height: 190rpx;
		position: relative;
		border-radius: 4rpx;
		margin-top: 24rpx;
		margin-right: 20rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 16rpx;
		}

		.del-icon {
			position: absolute;
			right: -10rpx;
			top: -10rpx;
			width: 32rpx;
			height: 32rpx;
		}

	}

	// .upload-imgs:first-child {
	// 	margin-left: 0;
	// }

	.upload_camera {
		width: 190rpx;
		height: 190rpx;
		background: #F2F2F2;
		border-radius: 4rpx;
		font-size: 22rpx;
		color: #A2A2A2;
		margin-top: 24rpx;
		margin-right: 20rpx;
	}
</style>